<!-- 选择物资按钮弹窗 -->
<template>
  <px-dialog v-model="visible" class="equip-dialog-wrap" title="选择物资" width="1000px" @open="openDialog" @close="closeDialog">
    <div class="equip-dialog-content">
      <px-form ref="formRef" class="custom-form-ui equip-form" :model="queryParams" label-position="right" label-width="120px">
        <px-row :gutter="24">
          <px-col :span="6">
            <px-form-item label="物资类型">
              <px-tree-select
                v-model="queryParams.typeCode"
                filterable
                clearable
                placeholder="请选择物资类型"
                :props="{
                  children: 'children',
                  label: 'name',
                  value: 'code'
                }"
                check-strictly
                :data="materialTypeList"
                :render-after-expand="false"
                @focus="materialTypFocus"
              />
            </px-form-item>
          </px-col>
          <px-col :span="6">
            <px-form-item label="物资名称">
              <px-input
                v-model="queryParams.name"
                placeholder="请输入物资名称"
                maxlength="50"
                clearable
                @blur="queryParams.name = $event.target.value.trim()"
                @keyup.enter="queryTable"
              >
                <template #suffix>
                  <px-icon style="cursor: pointer" @click="queryTable">
                    <search />
                  </px-icon>
                </template>
              </px-input>
            </px-form-item>
          </px-col>
          <px-col :span="6">
            <px-button type="primary" @click="queryTable">查询</px-button>
            <px-button @click="resetTable">重置</px-button>
          </px-col>
        </px-row>
      </px-form>
      <px-table
        ref="multipleTableRef"
        :row-key="getKey"
        :data="tableData"
        class="equip-table"
        size="small"
        max-height="320"
        border
        @selection-change="selectionChange"
      >
        <px-table-column type="selection" min-width="40" align="center" fixed="left" />
        <px-table-column
          v-for="(item, index) in tableColumns"
          :key="index"
          :label="item.label"
          :min-width="item.minWidth"
          :align="item.align"
          :show-overflow-tooltip="item.showOverflowTooltip"
          :fixed="item.fixed"
        >
          <template #default="scope">
            {{ scope.row[item.prop] === 0 ? scope.row[item.prop] : scope.row[item.prop] ? scope.row[item.prop] : "-" }}
          </template>
        </px-table-column>
      </px-table>
      <pagination
        v-show="total > 0"
        v-model:page="queryParams.pageNum"
        v-model:limit="queryParams.pageSize"
        class="equip-pagination"
        :total="total"
        @pagination="queryTable"
      />
      <div style="margin-top: 16px; text-align: right">
        <px-button @click="closeDialog">取消</px-button>
        <px-button type="primary" @click="handleSubmit">确定</px-button>
      </div>
    </div>
  </px-dialog>
</template>
<script setup lang="ts">
import { queryDictData } from "@/api/common";
import { queryMaterialTableList, queryMaterialTypeList } from "@/api/erc/material";
import { computed, reactive, toRefs, ref } from "vue";

// 调用父级-关闭弹窗方法
const emits = defineEmits(["closeDialog", "addTableRow"]);
// 父级传过来的值
const props = defineProps(["visible", "facCodeData"]);
const visible = computed(() => props.visible);
const multipleTableRef = ref(null);
// 页面本身的值
const state = reactive<any>({
  facCodeList: [],
  queryParams: {
    name: "",
    typeCode: "",
    facCode: "",
    pageNum: 1,
    pageSize: 10
  },
  tableColumns: [
    { prop: "name", label: "物资名称", minWidth: "180", showOverflowTooltip: true },
    { prop: "typeName", label: "物资类型", minWidth: "180", showOverflowTooltip: true },
    { prop: "code", label: "物资编码", minWidth: "150", showOverflowTooltip: true },
    { prop: "brand", label: "品牌", minWidth: "80", showOverflowTooltip: true },
    { prop: "specification", label: "规格型号", minWidth: "80", showOverflowTooltip: true },
    { prop: "unit", label: "单位", minWidth: "80", showOverflowTooltip: true }
  ],
  tableData: [],
  total: 0,
  selectRows: [],
  materialTypeList: [] //物资类型下拉
});
const { facCodeList, queryParams, tableColumns, tableData, total, selectRows, materialTypeList } = toRefs(state);
//物资类型聚焦时--存放
const materialTypFocus = async () => {
  materialTypeList.value = await queryMaterialTypeList({ name: queryParams.value.typeNameAll });
};
// 查询备件列表
const queryTable = async () => {
  const params = queryParams.value;
  const data: any = await queryMaterialTableList(params);
  tableData.value = data?.data;
  if (tableData.value && tableData.value.length > 0) {
    tableData.value.forEach(item => {
      item.quantity = 0;
    });
  }
  total.value = data?.total;
};
// 重置筛选条件和备件列表
const resetTable = async () => {
  queryParams.value.name = "";
  queryParams.value.typeCode = "";
  queryParams.value.facCode = "";
  queryTable();
};
const getKey = row => {
  return row.id;
};
// 表格多选框选中
const selectionChange = (val: any) => {
  selectRows.value = [];
  val.forEach((item: any) => {
    if (item.id) {
      selectRows.value.push(item);
    }
  });
};
// 确定选择物资
const handleSubmit = () => {
  emits("closeDialog");
  emits("addTableRow", selectRows.value);
};

// 打开弹窗
const openDialog = async () => {
  facCodeList.value = await queryDictData({ typeCode: "ERC_FACTORY_AREA" });
  queryParams.value = {
    spareName: "",
    facCode: props.facCodeData || "",
    pageNum: 1,
    pageSize: 20,
    name: "",
    typeCode: ""
    // facCode: ""
  };
  queryTable();
};
// 关闭弹窗
const closeDialog = () => {
  emits("closeDialog");
  multipleTableRef.value.clearSelection();
};
</script>
<style lang="scss" scoped>
@import url("@/views/erc/scss/add-dialog.scss");

.px-pagination {
  right: 32px;
}
</style>
